<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <title>Title</title>

    <link rel="shortcut icon" href="http://www.s.mmm-party.com/assets/img/favicon.ico">

    <!--<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css">-->
    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
    <!--<link rel="stylesheet" href="src/css/media-queries.css">-->
    <link rel="stylesheet" href="src/css/register.css">

    <script src="src/lib/jquery.min.js"></script>
    <script src="src/lib/jquery.cookie.js"></script>

    <!--<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js"></script>-->
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
    <!--<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js"></script>-->
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js"></script>
    <!--<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js"></script>-->
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js"></script>
    <script src="src/js/common.js"></script>


</head>
<body>
<header data-am-widget="header" class="am-header mpy-header">
    <div class="am-header-left am-header-nav mpy-header-nav">
        <i class="am-icon-bars mpy-icon-bars mpy-header-menu"></i>
    </div>

    <h1 class="am-header-title mpy-header-title">
        <a href="#title-link" class="">
            <img src="src/img/icon/top-logo-icon.svg" alt="">
        </a>
    </h1>

    <div class="am-header-right am-header-nav mpy-header-nav">
        <a href="login1.html" class="">
            <img src="src/img/icon/icon-user.svg" alt="">
        </a>
    </div>
    <div class="mpy-menu">
        <div class="mpy-menu-hd">
            <a href="javascript:;" class="mpy-close">&times;</a>
            <div class="mpy-menu-title">
                <img src="src/img/icon/top-logo-icon-white.svg" alt="">
            </div>
        </div>
        <div class="mpy-menu-bd">
            <ul>
                <a href="javascript:;" >
                    <li>首页</li>
                </a>
                <a href="javascript:;">
                    <li>关于爬梯</li>
                </a>
                <a href="javascript:;">
                    <li>爬梯产品</li>
                </a>
                <a href="javascript:;">
                    <li>爬梯课程</li>
                </a>
                <a href="javascript:;">
                    <li>最新动态</li>
                </a>
                <a href="javascript:;">
                    <li>联系我们</li>
                </a>
                <a href="javascript:;">
                    <li>购物车</li>
                </a>
                <a href="javascript:;">
                    <li>我的收藏</li>
                </a>
                <a href="javascript:;">
                    <li>爬梯客服</li>
                </a>
            </ul>
            <div class="mpy-menu-opt am-avg-sm-2">
                <a class="login">会员登录</a>
                <a class="reg">会员注册</a>
            </div>
            <div class="mpy-menu-userinfo">
                <a class="info">普通会员：12345678901</a>
            </div>
        </div>
    </div>
</header>

<div class="reg">
    <div class="mpy-reg">
        <div class="mpy-reg-hd">
            <h1>如果您已经是[音乐爬梯]会员，请直接登录。</h1>
        </div>
        <form action="" class=" mpy-form">
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>手机号码</label>
                <input id="registerUserMobile" type="text" class="userMobile" name="">
                <span class="state  "></span>
            </div>
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>输入密码</label>
                <input type="password" class="userPwd" name="" placeholder="密码长度必须大于8位数">
                <span class="state  "></span>
            </div>
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>确认密码</label>
                <input type="password" class="userPwd_s" name="" placeholder="密码长度必须大于8位数">
                <span class="state  "></span>
            </div>
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback ">
                <label>验证码</label>
                <input id="registerCode" type="text" class="mpy-login-form-code" name="">
                <span class="state  "></span>

            </div>
            <div class="check-code">
                <a href="javascript:;"><img id="registerImgCode" src="${pageContext.request.contextPath}/validateCode" alt=""/></a>
                <a href="javascript:;" class="change-code"><i class="check-code-refresh"></i>看不清楚，换一张</a>
            </div>
            <div class="am-form-group  mpy-form-group am-form-icon am-form-feedback am-g mpy-g">
                <label>推荐人编码</label>
                <div class="am-u-sm-6 mpy-y-sm-6">
                    <input type="text" id="recCode" class="mpy-forget-form-phone" name="recCode"  required value="${id}">
                    <span class="state  "></span>
                </div>
                <a href="javascript:;" id="addReferee" class=" am-u-sm-5 ">添加默认推荐人 </a>
            </div>
            <div class="mpy-form-group">
                <input type="checkbox" class="mpy-btn-agree">
                <span>我已阅读并同意 <a href="javascript:;" id="agreement-link" class="mpy-btn-agreement">《爬梯音乐会员规则》</a></span>
            </div>
            <button class="btn-default" name="sumbit">立即注册</button>
        </form>
    </div>
    <div class="mpy-modal">
        <div class="mpy-modal-hd">
            <div class="mpy-modal-title">
                <img src="src/img/icon/top-logo-icon-white.svg" alt="">
            </div>
        </div>
        <div class="mpy-modal-bd">
            <a href="javascript:;" class="mpy-modal-close">&times;</a>
            <h1 class="mpy-modal-bd-title">音乐爬梯免责声明</h1>
            <div class="mpy-modal-bd-content">
                <h3>总则</h3>
                <p>用户在接受音乐爬梯(mmm-party.com)服务之前，请务必仔细阅读本声明，用户直接或通过各类方式直接或间接使用音乐爬梯服务和数据的行为，都被视作已无条件接受本声明所涉全部内容；若用户对本声明的任何条款有异议，请停止使用音乐爬梯所提供的全部服务</p>
                <h3>第一条 免责说明</h3>
                <p>音乐爬梯仅为用户发表、采集的内容提供存储空间，音乐爬梯不对用户发表、采集的内容
                    提供任何形式的保证： 不保证内容满足您的要求，不保证音乐爬梯的服务不会中断(因网
                    络状况、通讯线路、第三方网站或管理部门的要求等任何不可抗力、不可归责于音乐爬梯
                    的原因而导致用户不能正常使用音乐爬梯，音乐爬梯不承担任何法律责任。) 用户在音乐
                    爬梯发表、采集的内容(包含但不限于音乐爬梯现有各产品、功能里的内容)。 仅表明其个
                    人的立场和观点，并不代表音乐爬梯的立场和观点。作为内容的发表或采集者，需自行对
                    所发表或采集的内容负责，因所发表或采集的内容引发的一切纠纷、损失，由该内容的发
                    表或采集者承担全部直接或间接(连带)法律责任，音乐爬梯不承担任何法律责任。
                    用户在音乐爬梯发表、采集的内容(包含但不限于音乐爬梯现有各产品、功能中的内容) 均
                    系用户个人行为产生，任何个人、公司或其他主体使用上述内容从事盈利性或非盈利性行
                    为导致的侵犯他人知识产权或其他合法权益而产生的一切纠纷、损失均由该个人、公司或
                    其他主体承担全部直接或间接(连带)法律责任，音乐爬梯不承担任何法律责任。
                    用户在音乐爬梯发布或采集侵犯他人知识产权或其他合法权益的内容时或者音乐爬梯接到
                    相关权利人投诉、举报时，音乐爬梯有权对侵权内容予以删除或进行其他限制措施，并保
                    留移交相关行政机关处理的权利，音乐爬梯不承担因此产生的一切损失或其他法律责任。
                    个人用户在申请注册用户时，不得使用已在工商局注册的企业或品牌名称作为用户名，经
                    查实无法提供相关证明的，音乐爬梯有权收回帐号。音乐爬梯的删除或其他限制措施行为
                    系履行网络服务提供者的审查、监管义务行为，不承担相关赔偿责任。音乐爬梯作为网络
                    服务提供者与用户及相关权利人之间的纠纷无关。</p>
                <h3>第二条 用户承诺</h3>
                <p>用户以各种方式使用音乐爬梯服务和数据 (包括但不限于发表、采集、宣传介绍、转载、
                    浏览及利用音乐爬梯或音乐爬梯用户发布或采集的内容)的过程中， 不得以任何方式利用
                    音乐爬梯直接或间接从事违反中国法律法规、以及社会公德的行为，且用户应得以任方式
                    利用音乐爬梯直接或间接从事违反中国法律法规、以及社会公德的行为，应当恪守何下述</p>
                <h4>承诺：</h4>
                <h5>发布、采集或提供的内容符合中国法律法规、社会公德发布、采集或提供的内容绝不能侵害正当权利人之权利不得干扰、损害和侵犯音乐爬梯的各种合法权利与利益遵守与音乐爬梯相关的网络服务的协议、指导原则等等音乐爬梯有权对违反上述承诺的内容予以删除</h5>
                <h3>第三条 维权须知</h3>
                <p>权利人的姓名(名称)、联系方式和地址。要求删除或者断开链接的具体侵权内容的名称要
                    求删除或者断开对应的采集或画板url地址，构成侵权的初步证明材料权利人应当对通知书
                    的真实性负责。权利人未提交通知书的音乐爬梯有权在核实情况后再行处理，因此产生的
                    一切损失由权利人承担。用户认为其在音乐爬梯发布或采集的内容未侵犯他人权利的或者
                    在接到音乐爬梯侵权处理通知时可以向音乐爬梯提交书面说明要求解除相关限制措施   (不
                    包括不可恢复性措施)。书面说明应当包含下列内容：</p>
                <h5>用户的姓名(名称)、手机号、地址 要求恢复的内容名称、对应的采集画板url地址及要求解除的限制措施访问是不构成侵权的初步证明材料用户应当对书面说明的真实性负责用户提交书面说明才恢复相关措施</h5>
                <h3>附则</h3>
                <p>音乐爬梯是一个音乐爱好的聚集地，我们拥有个性，也请尊重他人，让自己大方得体。</p>
            </div>
            <button class="modal-btn-agree">我已同意并阅读</button>
        </div>
    </div>
</div>
<footer class="mpy-footer">
    <div class="mpy-ad-list">
        <a href="javascript:;">
            <picture>
                <source srcset="src/img/index/index-img3-1350.png" media="(min-width:901px)">
                <source srcset="src/img/index/index-img3-1080.png" media="(min-width:768px)">
                <source srcset="src/img/index/index-img3-810.png" media="(min-width:481px)">
                <img src="src/img/index/index-img3-540.png" alt="" class="mpy-hotLesson-img am-img-responsive">
            </picture>
        </a>
        <a href="javascript:;">
            <picture>
                <source srcset="src/img/index/index-img3-1350.png" media="(min-width:901px)">
                <source srcset="src/img/index/index-img3-1080.png" media="(min-width:768px)">
                <source srcset="src/img/index/index-img3-810.png" media="(min-width:481px)">
                <img src="src/img/index/index-img3-540.png" alt="" class="mpy-hotLesson-img am-img-responsive">
            </picture>
        </a>
        <a href="javascript:;">
            <picture>
                <source srcset="src/img/index/index-img3-1350.png" media="(min-width:901px)">
                <source srcset="src/img/index/index-img3-1080.png" media="(min-width:768px)">
                <source srcset="src/img/index/index-img3-810.png" media="(min-width:481px)">
                <img src="src/img/index/index-img3-540.png" alt="" class="mpy-hotLesson-img am-img-responsive">
            </picture>
        </a>

    </div>
    <div class="mpy-contactUs">
        <div class="mpy-contactUs-hd">
            <h1>联系我们</h1>
        </div>
        <div class="mpy-contactUs-bd">
            <!--  <img src="src/img/icon/icon-call-group.svg" alt="" usemap="#callMap">
              <map name="callMap" id="callMap">
                  <area shape="rect" coords="0,0,22,22" href="javascript:;" alt="">
                  <area shape="rect" coords="50,0,76,22" href="javascript:;" alt="">
                  <area shape="rect" coords="104,0,125,22" href="javascript:;" alt="">
              </map>-->
            <ul class="am-avg-sm-3 mpy-avg-sm-3">
                <li><a href="javascript:;"><img src="src/img/icon/icon-phone.svg" alt=""></a></li>
                <li><a href="javascript:;"><img src="src/img/icon/icon-wc.svg" alt=""></a></li>
                <li><a href="javascript:;"><img src="src/img/icon/icon-place.svg" alt=""></a></li>
            </ul>
            <a href="login1.html" class="mpy-contactUs-login mpy-btn-white">会员登陆</a>
            <a href="aboutUs.html" class="mpy-contactUs-abouts mpy-btn-white">关于爬梯</a>
        </div>
        <!--<div class="mpy-contactUs-footer">
            <span>快捷菜单</span>
            <span>></span>
        </div>-->
        <section data-am-widget="accordion" class="am-accordion am-accordion-gapped mpy-contactUs-footer" data-am-accordion='{  }'>
            <dl class="am-accordion-item ">
                <dt class="am-accordion-title">
                    <span>快捷菜单</span>
                </dt>
                <dd class="am-accordion-bd am-collapse ">
                    <a href="memberCenter.html">会员中心</a>
                    <a href="joinUs.html">加入我们</a>
                    <a href="contactUs.html">联络我们</a>
                    <a href="javascript:;">隐私条款</a>
                </dd>
            </dl>
        </section>
    </div>
    <div class="mpy-copyright">
        <span>(c)2016</span>
        <span>粤 ICP备16125023号</span>
    </div>
</footer>
<script>
    $(".mpy-header-menu").on("click", function () {
        $(".mpy-menu").fadeIn();
    })
    $('.mpy-close').on('click', function () {
        $(".mpy-menu").fadeOut();
    })
    $('.mpy-btn-agreement').on("click",function () {
        $(".mpy-modal").fadeIn();
    })
    $('.mpy-modal-close').on("click",function () {
        $(".mpy-modal").fadeOut();
    })
</script>
<script type="text/javascript">
    var register={};
    register.isCheckMobile=false;
    register.isPwdCheck=false;
    register.codeCheck=false;
    register.recCheck = false;
    register.checked = false;
    register.isEmptyofRecheck = function(){
        if($.checkNull('#recCode')){
            var self = document.getElementById('recCode');
            var userRecCode = self.value;
            $.post("${pageContext.request.contextPath}/register/isreferrer/"+userRecCode)
                    .done(function(data){
                        if(data){
                            register.recCheck = true;
                        }
                        else{
                            register.recCheck = false;
                        }
                    });
        }
    };

    $(function () {
        var url = window.location.href;
        var isCheckPeople = "http://localhost:8080/register";
        if(url==isCheckPeople){
            $('#recCode').val("").attr("readonly",false);
        }



        $("#addReferee").click(function(e){
            e.preventDefault();
            $('#recCode').val("${id}");
            register.recCheck = true;
        });

        $('.check-code >img,.check-code > a').on('click',function(){
            $('#registerImgCode').attr({'src':'${pageContext.request.contextPath}/validateCode?'+Math.random()});
        });

        $("#agreeInput").click(function(e){
            if ($(this).is(":checked")) {
                $("[name=items]:checkbox").prop("checked", true);
                register.checked = true;
            } else {
                $("[name=items]:checkbox").prop("checked", false);
                register.checked = false;
            }
        });





        $('#agreement-link').click(function(e){
            e.preventDefault();
            $('#modal-agreement-box').load('${pageContext.request.contextPath}/register/modalAgreement',function(){

                $('.icon-close,.btn-return').click(function () {
                    $('.modal-bg,.modal-agreement').fadeOut();
//                    <%--window.location.reload();--%>
                });
                $('.modal-bg,.modal-agreement').show();
                $('.btn-agree').click(function(){
                    $('.modal-bg,.modal-agreement').fadeOut();
                    $('#agreeInput').attr('checked',"true");
                    register.checked = true;
                });
            });

        });


        function checkPhone(self){
            var userMobile=$("#registerUserMobile").val();
            if($.checkPhone('.userMobile')){
                $.post('${pageContext.request.contextPath}/register/checkMobile/mobile/'+userMobile)
                        .done(function(result){
                            if(result){
                               $(self).siblings('.state').html('ok');
                                statechange(self,'state-success');
                                register.isCheckMobile=true;
                                register.submit=true;
                            }else{
                                $(self).siblings('.state').html('手机号已注册');
                                statechange(self,'state-error');
                                register.submit=false;
                            }
                        }).fail(function(){
                   $(self).siblings('.state').html('服务器通信异常');
                    statechange(self,'state-warn');
                    register.submit=false;
                });
            }else{
               $(self).siblings('.state').html('error');
                statechange(self,'state-error');
                register.submit=false;
            }
        }


        function statechange(self,state) {
            console.log(state);
            if(state=='state-success'){
                $(self).siblings('.state').removeClass('state-error state-warn am-icon-times am-icon-warning').addClass(state+" am-icon-check");
            }
            else if(state=='state-error'){
                $(self).siblings('.state').removeClass('state-success state-warn am-icon-check am-icon-warning').addClass(state + " am-icon-times");
            }
            else{
                $(self).siblings('.state').removeClass('state-success state-error am-icon-check am-icon-times').addClass(state +' am-icon-warning');
            }
        }

        //验证手机号
        $('.userMobile').bind({
            focus:function(){
                if(!register.isCheckMobile){
                    $('.userMobile').one('blur',function(){
                        checkPhone(this);
                    });
                }
            },
            change:function(){
                register.isCheckMobile=false;
                $('.userMobile').off('focus');
                $('.userMobile').one('blur',function(){
                    checkPhone(this);
                });
            }
        });


        function checkUserPwd(self){
            $.when($.checkPwdLength('.userPwd')).done(function(result){
                if(!result){
                    $(self).siblings('.state').html('密码长度不足');
                    statechange(self,'state-error');
                    register.isPwdCheck=false;
                    return false;
                }
                register.isPwdCheck=true;
                return true;
            }).done(function(result){
                if(result){
                    if($.checkPwdSame('.userPwd','.userPwd_s')){
                        $(self).html('ok');
                        statechange(self,'state-success');
                        register.isPwdCheck=true;
                    }else{
//                        $.checkPwdLength('.userPwd_s')?$(self).siblings('.state').html('密码不一致')
//                                :$(self).siblings('.state').html('请再次确认密码');
                        if($.checkPwdLength('.userPwd_s')){
                            $(self).siblings('.state').html('密码不一致')
                            statechange(self,'state-error');
                        }
                        else{
                            $(self).siblings('.state').html('请再次确认密码')
                            statechange(self,'state-success');
                        }
                        register.isPwdCheck=false;
                    }
                }
            });
        }
        function checkCode(self){
            if($.checkCodeLength("#registerCode")){
                var registerCode=$("#registerCode").val();
                $.post('${pageContext.request.contextPath}/register/checkValidateCode/validateCode/'+registerCode)
                        .done(function(result){
                            if(result){
                                $(self).siblings('.state').html('ok');
                                statechange(self,'state-success');
                                register.codeCheck=true;
                            }else{
                                $('#registerImgCode').attr({'src':'${pageContext.request.contextPath}/validateCode?'+Math.random()});
                                $(self).siblings('.state').html('验证码错误');
                                statechange(self,'state-error');
                                register.codeCheck=false;
                            }

                        }).fail(function(){
                    $(self).siblings('.state').html('服务器通信异常');
                    statechange(self,'state-warn');
                    register.codeCheck=false;
                });
            }else{
                $(self).siblings('.state').html('error');
                statechange(self,'state-error');
                register.codeCheck=false;
            }
        }
        function checkUserPwds(self){
            $.when($.checkPwdLength('.userPwd_s')).done(function(result){
                if(result){
                    register.isPwdCheck=true;
                    return true;
                }else{
                    $(self).siblings('.state').html('密码长度不足');
                    statechange(self,'state-error');
                    register.isPwdCheck=false;
                    return false;
                }
            }).done(function(result){
                if($.checkPwdSame('.userPwd','.userPwd_s')){
                    $('.userPwd').siblings('.state').html('ok');
                    $(self).siblings('.state').html('ok');
                    statechange(self,'state-success');
                    statechange('.userPwd','state-success');
                    register.isPwdCheck=true;
                }else{
                    $('.userPwd').siblings('.state').html('密码不一致');
                    statechange(self,'state-error');
                    statechange('.userPwd','state-error');
                    register.isPwdCheck=false;
                }
            });
        }
        $('.userPwd').on({
            blur:function(){
                checkUserPwd(this);
            }
        });
        $('.userPwd_s').on({
            blur:function(){
                checkUserPwds(this);
            }
        });
        $('.code').on('blur',function () {
            checkCode(this);
        });
        $('#recCode').on("blur",function(){
            var self = $(this);
            if($.checkNull('#recCode')){
                $.post("register/isreferrer/"+self.val())
                        .done(function(data){
                            if(data){
                                register.recCheck = true;
                                $(self).siblings('.state').html('ok');
                                statechange(self,'state-success');
                            }
                            else{
                                register.recCheck = false;
                                $(self).siblings('.state').html('暂无此推荐人');
                                statechange(self,'state-error');
                            }
                        });

            }
            else{
                register.recCheck = false;
                $(self).siblings('.state').html('推荐人为空');
                statechange(self,'state-error');
            }
        });

        //提交
        $('.btn_submit').on('click',function (e) {

            e.preventDefault();
            if(!register.isCheckMobile){checkPhone($('.userMobile'))}
            if(!register.isPwdCheck){checkUserPwd($('.userPwd'))}
            if(!register.codeCheck){checkCode($('.code'))}

            if(!register.recCheck){
                $('#recCode').siblings('.state').html('推荐人有误');
                statechange('#recCode','state-error');
                return ;
            }
            else{
                $('#recCode').siblings('.state').html('ok');
                statechange('#recCode','state-success');
            }
            if(!register.checked){
                alert('请阅读并同意爬梯会员规则');
                return ;
            }
            if(register.isCheckMobile&&register.isPwdCheck&&register.codeCheck&&register.checked&&register.recCheck){
                var mobile = $('.userMobile').val();
                var userPwd = $('.userPwd').val();
                var code = $('.registerCode').val();
                var recCode = $('#recCode').val();
                $.post("${pageContext.request.contextPath}/register/doregister",{"mobile":mobile,"pwd":userPwd,"code":code,"recCode":recCode})
                        .done(function(result){
                            if(result){
                                $('.modal-box').load('${pageContext.request.contextPath}/sms/modalRegsiterSuccess',function(){
                                    $('.modal-bg,.modal-success').show();
                                });
                            }
                            else{
                                $('.modal-box').load('${pageContext.request.contextPath}/sms/modalRegsiterError',function(){
                                    $('.modal-bg,.modal-error').show();
                                });
                            }
                        });
                //document.forms[0].submit();
            }
        });
    })
    $(function(){
        register.isEmptyofRecheck();
    });
</script>
</body>
</html>